<script lang="ts" setup>
import { defineProps, ref, watch, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { UserApi } from '@/apis/index'
import { timeAbbreviation } from '@/utils/time'
import { useCounterStore } from '@/stores/counter'

import type { User, Stat, Vlist, UserFollow } from '@/TypingMore/UserTyping'

const props = defineProps<{
    uid: string
}>()

const store = useCounterStore()

const { browseRecords, follow } = store

const router = useRouter()

const dafaultBiliUser = <User>{}

const Vlist = ref<Vlist[]>([])

const userStat = ref<Stat>({
    black: 0,
    follower: 0,
    following: 0,
    mid: 0,
    whisper: 0
})

const isFollowe = ref(false)

const biliUserData = ref<User>()
// 获取基本的主页数据
const getBliUserData = async () => {
    let { data } = await UserApi.getUserBaseData(props.uid)
    let { data: stat } = await UserApi.getUserStat(props.uid)
    biliUserData.value = data.data
    userStat.value = stat.data
    console.log(data, stat)
}
// 获取发布过的视频
const getBliUserVideo = async () => {
    let { data } = await UserApi.getUserPublishVideo(props.uid)
    Vlist.value = data.data.list.vlist
    console.log(data)
}

// 处理数据
const biliUserDataHandle = (data: User): UserFollow => {
    let obj = {
        mid: data.mid + '',
        face: data.face,
        name: data.name,
        sign: data.official.title
    }

    return obj
}

const goToVideo = (bvid: string, obj: any) => {
    browseRecords(obj)
    router.push(`/video/${bvid}`)
}

watch(biliUserData, () => {
    getBliUserVideo()
})

getBliUserData()

onMounted(() => {
    if (localStorage.getItem('followUsers')) {
        let arr = localStorage.getItem('followUsers') as string
        let newArr: Array<any> = JSON.parse(arr)

        for (let i = 0; i < newArr.length; i++) {
            let item = newArr[i]
            console.log(item.mid, props.uid)
            if (item.mid == props.uid) {
                console.log(item.mid, props.uid)
                isFollowe.value = true
                break
            } else {
                console.log(item.mid, props.uid)
                isFollowe.value = false
            }
        }
    }
})

</script>

<template>
    <div>
        <div>
            <img src="@/assets/bannerTop_new.png" alt="">
        </div>
        <div class=" flex justify-between px-3">
            <div class=" relative inline-block  w-20 h-20 -top-3">
                <img :src="biliUserData?.face" alt="" class="w-full h-full rounded-full" />
                <img src="@/assets/icon_Certification_official.png" class=" absolute bottom-0 right-0 w-5 h-5" alt="">
            </div>
            <div class="flex-1 ml-10">
                <div class="flex justify-between pt-2 text-center text-sm">
                    <div>
                        <p>{{ timeAbbreviation(userStat?.follower) }}</p>
                        <p class=" text-xs">粉丝</p>
                    </div>
                    <div>
                        <p>{{ timeAbbreviation(userStat?.following) }}</p>
                        <p class=" text-xs">关注</p>
                    </div>
                    <div>
                        <p>{{ timeAbbreviation(userStat?.mid) }}</p>
                        <p class=" text-xs">获赞</p>
                    </div>
                </div>
                <div class=" py-1 rounded-md mt-3 text-center text-white" style="background-color: #fb7299;"
                    @click="follow(biliUserDataHandle(biliUserData as User)), isFollowe = !isFollowe">
                    {{ isFollowe ? '已关注' : '+ 关注' }}
                </div>
            </div>
        </div>
        <div class=" p-3">
            <p><span class="text-lg">{{ biliUserData?.name }}</span><span>{{ biliUserData?.sex }}</span><span
                    style="font-size: 13px ;" class=" m-2  font-black text-white"><i
                        class=" text-xs font-bold bg-red-500">lv</i><i class=" font-bold bg-red-500">{{
                            biliUserData?.level
                        }}</i></span><span style="background-color: #fb7299;" class=" m-2 text-xs text-white rounded-sm">{{
    biliUserData?.vip.label.text }}</span></p>
            <p class=" flex items-center text-size13"><img src="@/assets/icon_Certification_official.png" alt=""
                    class=" w-4 h-4">{{ biliUserData?.official.title }}</p>
            <p class="text-size13 text-gray-400">{{ biliUserData?.sign }}</p>
            <p class="text-xs"><span class=" text-slate-900 bg-gray-100">{{ biliUserData?.nameplate.level }}</span><span
                    class="bg-gray-100 ml-2">{{ 'uid:' + biliUserData?.mid }}</span></p>
        </div>
        <div class="px-3 py-1 border-y" style="color: #fb7299;">
            <span>视频</span>
        </div>
        <div>
            <div class=" flex relative py-2 px-3 border-b " v-for="v in Vlist" :key="v.aid" @click="goToVideo(v.bvid, v)">
                <div class=" relative w-28">
                    <img :src="v.pic + '@468w_292h_1c.webp'" alt="" class=" w-full h-full">
                    <div class=" absolute bottom-0 right-0 text-xs text-white" style="background: rgba(0,0,0,.5); ">{{
                        v.length
                    }}</div>
                </div>
                <div class=" flex-1 flex flex-col justify-between overflow-hidden ml-3">
                    <div class=" whitespace-nowrap text-ellipsis overflow-hidden">{{ v.title }}</div>
                    <div><span>{{ timeAbbreviation(v.play) }}</span><span>{{ timeAbbreviation(v.video_review) }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style>
.text-size13 {
    font-size: 13px;
}
</style>